<template>
  <div>
    <!-- Nav tabs -->
     <ul class="nav nav-tabs" role="tablist">
        <li
          v-for="t in tabs"
          :class="{active: t.show}"
          @click.prevent="choose(t)">
          <a href="javascript:;">
            {{t.header}}
            <button
              type="button" class="close"
              v-if="!t.pined"
              @click.prevent="close($index,t)">
              &times;
            </button>
          </a>
        </li>
     </ul>

     <!-- Tab panes -->
     <div class="tab-content">
        <slot></slot>
     </div>
  </div>
</template>

<script>
exports.props = {
  active: {
    type: Number,
    default: 0
  }
};

exports.data = () => {
  return {
    tabs: []
  };
};

exports.methods = {
  choose(tab) {
    const tabs = this.tabs;
    tabs.map((t) => t.show = false);
    tab = tab || tabs[tab.length - 1];
    tab.show = true;
  },
  add(tab) {
    const _this = this;
    const tabs = _this.tabs;
    tabs.push(tab);
    _this.choose(tab);
  },
  close(index, tab) {
    const tabs = this.tabs;
    if (tab.show) {
      tab.show = false;
      tabs[index + (index ? -1 : 1)].show = true;
    }
    tabs.splice(index, 1);
    tab.$destroy({
      remove: true
    });
  }
};
</script>

<style lang="stylus">
.nav-tabs
  margin-bottom: 15px
  min-height: 40px
  > li > a
    transition: all .2s
    .close
      margin: 0 -8px 0 4px
      opacity: 0
      visiblity: hidden
      transition: all .2s
    &:hover
    &:focus
    &.active
      .close
        opacity: .2
        visiblity: visiable
        &:hover
        &:focus
          opacity: .6

.tab-content > .tab-pane
  display: block
</style>
